<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id = "liFather">
        <li class="sg">张三</li>
        <li id  = "em">李四</li>
        <li class="sg">王五</li>
    </ul>
    <button id = "btnAdd1">添加(父子)</button>
    <button id = "btnAdd2">添加(兄弟)</button>
    <button id = "btnRem1">删除节点</button>
    <button id = "btnRem2">删除某个</button>
    <button id = "btnRem2">删除</button>

</body>
<script src="js/jquery-3.7.1.js"></script>
<script>
    /*父子关系*/
    $("#btnAdd1").click(function(){
        //1.选择要操作的节点
        var liNode = $("<li>赵六</li>");
        //2.选择ul节点
        var ulNode = $("#liFather");
        ulNode.append(liNode);
    })

    /*兄弟关系*/
    $("#btnAdd2").click(function(){
        var liNode = $("<li>田七</li>");
        var ulNode = $("#liFather li:eq(2)");
        ulNode.before(liNode);
    })

    /*删除节点*/
    $("#btnRem1").click(function(){
        var ulNode = $("#liFather");
        ulNode.remove();
    })
    //删除某个
    $("#btnRem2").click(function(){
        var ulNode = $("#liFather li ");
        ulNode.remove("[class != sg]" );
    })
    //保留删除
    $("#btnRem3").click(function(){
        var lisiname = $("#em");
        lisiname.detach();
    })
</script>
</html>